<template>
  <div>
    <el-tabs v-model="tabActive" type="border-card" style="min-height: calc(100vh - 125px)">
      <el-tab-pane v-if="pass('sys:config:base')" label="个性配置" name="config">
        <base-config />
      </el-tab-pane>
      <el-tab-pane v-if="pass('sys:config:prop')" label="存储配置" name="storage">
        <upload-config />
      </el-tab-pane>
      <el-tab-pane v-if="pass('sys:config:prop')" label="人脸识别" name="face">
        <face-config />
      </el-tab-pane>
      <el-tab-pane v-if="pass('sys:config:switch')" label="功能配置" name="switch">
        <switch-config />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import checkPermission from '@/utils/permission'

export default {
  data() {
    return {
      configTab: 'config-tab',
      tabActive: 'config'
    }
  },
  computed: {
    ...mapGetters([
      'siteData'
    ])
  },
  watch: {
    tabActive: {
      handler(val) {
        localStorage.setItem(this.configTab, val)
      }
    }
  },
  created() {
    const val = localStorage.getItem(this.configTab)
    if (val) {
      this.tabActive = val
    }
  },
  methods: {
    // 是否有权限
    pass(ps) {
      return checkPermission([ps])
    }

  }
}
</script>
